<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人民币大小写转化工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: white;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        #input-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            width: 100%;
        }
        #rmb-input {
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
            width: 50%;
        }
        #input-container button {
            padding: 8px 16px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        #convert-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        #clear-btn {
            background-color: #808080;
            color: white;
        }
        #result-container {
            margin-top: 20px;
            font-size: 18px;
            text-align: left;
            background-color: #f4f4f4;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 60%;
        }
        #result-container p {
            margin: 10px 0;
        }
        #result-container span {
            font-weight: bold;
            color: #0b57d0;
            font-size: 20px;
        }
        #modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }
        #modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 30%;
            text-align: center;
            border-radius: 8px;
        }
        #close-modal {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="input-container">
        <input type="text" id="rmb-input" placeholder="输入人民币金额">
        <button id="convert-btn" onclick="convertRMB()">转化</button>
        <button id="clear-btn" onclick="clearResult()">清除</button>
    </div>
    <div id="result-container">
        <p>大写金额：<span id="upper-result"></span></p>
        <p>小写金额：<span id="lower-result"></span></p>
    </div>
    <div id="modal">
        <div id="modal-content">
            <span id="close-modal">&times;</span>
            <p>请输入有效的数字金额！</p>
        </div>
    </div>
    <script>
        function convertRMB() {
            const input = document.getElementById('rmb-input').value;
            const isNumber =!isNaN(parseFloat(input)) && isFinite(input);
            if (isNumber) {
                const upperResult = convertToUpper(input);
                document.getElementById('upper-result').textContent = upperResult;
                document.getElementById('lower-result').textContent = '¥' + parseFloat(input).toFixed(2);
            } else {
                const modal = document.getElementById('modal');
                modal.style.display = 'block';
                const closeBtn = document.getElementById('close-modal');
                closeBtn.onclick = function () {
                    modal.style.display = 'none';
                }
                window.onclick = function (event) {
                    if (event.target == modal) {
                        modal.style.display = 'none';
                    }
                }
            }
        }
        function convertToUpper(num) {
            const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
            const units = ['', '拾', '佰', '仟'];
            const bigUnits = ['', '万', '亿'];
            const decimalUnits = ['角', '分'];
            num = parseFloat(num).toFixed(2);
            const [integerPart, decimalPart] = num.split('.');
            let integerStr = '';
            let groupIndex = 0;
            for (let i = integerPart.length - 1; i >= 0; i -= 4) {
                let group = integerPart.slice(Math.max(0, i - 3), i + 1);
                let groupStr = '';
                for (let j = 0; j < group.length; j++) {
                    const digit = parseInt(group[j]);
                    if (digit === 0) {
                        if (groupStr.length > 0 && groupStr[groupStr.length - 1]!== digits[0]) {
                            groupStr += digits[0];
                        }
                    } else {
                        groupStr += digits[digit] + units[group.length - j - 1];
                    }
                }
                if (groupStr.endsWith(digits[0])) {
                    groupStr = groupStr.slice(0, -1);
                }
                if (groupStr.length > 0) {
                    groupStr += bigUnits[groupIndex];
                }
                integerStr = groupStr + integerStr;
                groupIndex++;
            }
            if (integerStr.length === 0) {
                integerStr = digits[0];
            }
            integerStr += '元';
            let decimalStr = '';
            for (let i = 0; i < decimalPart.length; i++) {
                const digit = parseInt(decimalPart[i]);
                if (digit!== 0) {
                    decimalStr += digits[digit] + decimalUnits[i];
                }
            }
            if (decimalStr.length === 0) {
                decimalStr = '整';
            }
            return integerStr + decimalStr;
        }
        function clearResult() {
            document.getElementById('rmb-input').value = '';
            document.getElementById('upper-result').textContent = '';
            document.getElementById('lower-result').textContent = '';
        }
    </script>
</body>
</html>
    